<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-white">
    <!-- 导航栏 -->
    <nav class="fixed w-full bg-white shadow-md z-50">
      <div class="container mx-auto px-6 py-4">
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <h1 class="text-2xl font-bold text-blue-600">圆阳智能</h1>
          </div>
          <div class="hidden md:flex space-x-8">
            <a href="#about" class="text-gray-600 hover:text-blue-600">企业初衷</a>
            <a href="#development" class="text-gray-600 hover:text-blue-600">企业发展</a>
            <a href="#plan" class="text-gray-600 hover:text-blue-600">发展规划</a>
            <a href="#values" class="text-gray-600 hover:text-blue-600">企业文化</a>
            <a href="#salary" class="text-gray-600 hover:text-blue-600">薪资政策</a>
          </div>
        </div>
      </div>
    </nav>

    <!-- Hero Section -->
    <div class="relative h-screen">
      <div class="absolute inset-0">
        <img :src="heroImage" alt="Hero Background" class="w-full h-full object-cover object-top"/>
      </div>
      <div class="relative container mx-auto px-6 h-full flex items-center">
        <div class="max-w-2xl text-white">
          <h1 class="text-5xl font-bold mb-6">圆阳智能</h1>
          <p class="text-xl mb-8">用科技创新助力教育发展，让每个孩子都能享受智慧学习的乐趣</p>
          <button class="bg-blue-600 text-white px-8 py-3 !rounded-button whitespace-nowrap hover:bg-blue-700 transition-colors">
            了解更多
          </button>
        </div>
      </div>
    </div>

    <!-- 企业初衷 -->
    <section id="about" class="py-20 bg-gray-50">
      <div class="container mx-auto px-6">
        <div class="flex flex-col md:flex-row items-center gap-12">
          <div class="w-full md:w-1/2">
            <img :src="aboutImage" alt="About Us" class="w-full rounded-lg shadow-lg"/>
          </div>
          <div class="w-full md:w-1/2">
            <h2 class="text-3xl font-bold mb-6 text-gray-800">企业初衷</h2>
            <p class="text-gray-600 mb-8 leading-relaxed">
              我们致力于中小学生的教育游戏开发、富含中华文明内涵的动漫开发和极具个性化的智能私塾学堂开发，让学生真正通过华为智慧屏这种现代化智能互动方式，得到应有的德、智、体、美、劳全方位的个性化深入发展。
            </p>
            <div class="grid grid-cols-5 gap-4">
              <div v-for="(value, index) in educationValues" :key="index" class="text-center">
                <i :class="value.icon + ' text-2xl text-blue-600 mb-2'"></i>
                <p class="text-sm text-gray-700">{{ value.text }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 企业发展 -->
    <section id="development" class="py-20">
      <div class="container mx-auto px-6">
        <h2 class="text-3xl font-bold mb-12 text-center text-gray-800">企业发展历程</h2>
        <div class="relative">
          <div class="flex flex-col md:flex-row items-center gap-12">
            <div class="w-full md:w-1/2">
              <img :src="founderImage" alt="Founder" class="w-full rounded-lg shadow-lg"/>
            </div>
            <div class="w-full md:w-1/2">
              <div class="bg-white p-8 rounded-lg shadow-lg">
                <h3 class="text-2xl font-bold mb-4 text-gray-800">创始人介绍</h3>
                <p class="text-gray-600 leading-relaxed mb-6">
                  创始人黄先生本科毕业于华中地区某985高校，现在西南地区某高中任教物理学科，国家二级心理咨询师。经过在武汉汇众游戏学院的深造，他立志将技术与教育相结合，创造真正有价值的教育产品。
                </p>
                <div class="flex gap-4">
                  <span class="inline-flex items-center px-3 py-1 rounded-full bg-blue-100 text-blue-800">
                    <i class="fas fa-graduation-cap mr-2"></i>985 高校毕业
                  </span>
                  <span class="inline-flex items-center px-3 py-1 rounded-full bg-green-100 text-green-800">
                    <i class="fas fa-brain mr-2"></i>心理咨询师
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 企业规划 -->
    <section id="plan" class="py-20 bg-gray-50">
      <div class="container mx-auto px-6">
        <h2 class="text-3xl font-bold mb-12 text-center text-gray-800">企业规划</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div class="bg-white p-8 rounded-lg shadow-lg">
            <img :src="productImage" alt="Product" class="w-full h-48 object-cover rounded-lg mb-6"/>
            <h3 class="text-xl font-bold mb-4 text-gray-800">教育游戏开发</h3>
            <p class="text-gray-600">将小学生学习的知识游戏化，通过华为智慧屏打造沉浸式学习体验。</p>
          </div>
          <div class="bg-white p-8 rounded-lg shadow-lg">
            <img :src="huaweiScreenImage" alt="Huawei Screen" class="w-full h-48 object-cover rounded-lg mb-6"/>
            <h3 class="text-xl font-bold mb-4 text-gray-800">智慧屏应用</h3>
            <p class="text-gray-600">依托华为智慧屏平台，打造互动式教育内容，让学习更加生动有趣。</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 企业价值观 -->
    <section id="values" class="py-20">
      <div class="container mx-auto px-6">
        <h2 class="text-3xl font-bold mb-12 text-center text-gray-800">企业价值观</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div v-for="(value, index) in companyValues" :key="index" 
               class="text-center p-8 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow">
            <i :class="value.icon + ' text-4xl text-blue-600 mb-4'"></i>
            <h3 class="text-xl font-bold mb-4 text-gray-800">{{ value.title }}</h3>
            <p class="text-gray-600">{{ value.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 薪资政策 -->
    <section id="salary" class="py-20 bg-gray-50">
      <div class="container mx-auto px-6">
        <h2 class="text-3xl font-bold mb-12 text-center text-gray-800">薪资政策</h2>
        <div class="bg-white p-8 rounded-lg shadow-lg">
          <div ref="salaryChart" class="h-80 mb-8"></div>
          <div class="prose max-w-none">
            <p class="text-gray-600 mb-4">
              当企业产品未上架或上架无收益时，员工可向企业申请基本的每月生活交通补助，具体金额标准可入职时协商写入劳动合同。
            </p>
            <p class="text-gray-600">
              当企业开始盈利时，百分之八十的盈利按员工入职时间权重平均分配给每个员工，前期申请过补助的员工，核发工资超过补助标准的部分自行扣减，直至扣减总额超过补助总额，以后工资不再扣减。
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-12">
      <div class="container mx-auto px-6">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <h3 class="text-xl font-bold mb-4">联系我们</h3>
            <p class="mb-2"><i class="fas fa-envelope mr-2"></i>contact@yuanyang.com</p>
            <p><i class="fas fa-phone mr-2"></i>400-888-8888</p>
          </div>
          <div>
            <h3 class="text-xl font-bold mb-4">关注我们</h3>
            <div class="flex space-x-4">
              <i class="fab fa-weixin text-2xl cursor-pointer"></i>
              <i class="fab fa-weibo text-2xl cursor-pointer"></i>
            </div>
          </div>
          <div>
            <h3 class="text-xl font-bold mb-4">公司地址</h3>
            <p>中国 武汉市 洪山区 光谷大道</p>
          </div>
        </div>
        <div class="mt-8 pt-8 border-t border-gray-700 text-center">
          <p>&copy; 2025 圆阳智能. All rights reserved.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const heroImage = 'https://ai-public.mastergo.com/ai/img_res/0f27e62e70285c57c607db18f0ae1947.jpg';
const aboutImage = 'https://ai-public.mastergo.com/ai/img_res/a57a3ea73f15874627c2d070dee455d7.jpg';
const founderImage = 'https://ai-public.mastergo.com/ai/img_res/d7298d0ae9f59a6896d9566a882d31d9.jpg';
const productImage = 'https://ai-public.mastergo.com/ai/img_res/cd29687d7a6f262a13851e0fcb1034c3.jpg';
const huaweiScreenImage = 'https://ai-public.mastergo.com/ai/img_res/e1054f93e672ba9b7bd8e5b607e8902e.jpg';

const educationValues = [
  { icon: 'fas fa-heart', text: '德' },
  { icon: 'fas fa-brain', text: '智' },
  { icon: 'fas fa-running', text: '体' },
  { icon: 'fas fa-palette', text: '美' },
  { icon: 'fas fa-hands', text: '劳' }
];

const companyValues = [
  { 
    icon: 'fas fa-leaf',
    title: '朴素生活',
    description: '践行简单质朴的生活方式，专注于创造真正的价值'
  },
  {
    icon: 'fas fa-fire',
    title: '激情工作',
    description: '以饱满的热情投入工作，追求卓越的教育产品'
  },
  {
    icon: 'fas fa-flag',
    title: '爱国利民',
    description: '心系祖国教育事业，为培养下一代贡献力量'
  }
];

const salaryChart = ref<HTMLElement | null>(null);

onMounted(() => {
  if (salaryChart.value) {
    const chart = echarts.init(salaryChart.value);
    const option = {
      animation: false,
      title: {
        text: '企业盈利分配方案',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}%'
      },
      series: [
        {
          type: 'pie',
          radius: ['50%', '70%'],
          data: [
            { value: 80, name: '员工分配' },
            { value: 20, name: '企业运营' }
          ],
          label: {
            show: true,
            formatter: '{b}: {c}%'
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    chart.setOption(option);
  }
});
</script>

<style scoped>
.prose {
  max-width: 65ch;
  margin: 0 auto;
}

.prose p {
  margin-bottom: 1.5em;
  line-height: 1.75;
}
</style>

